<template>
  <div class="box">
    <div
      v-cloak
      class="title">
      {{ title }}
    </div>
    <slot class="content"></slot>
  </div>
</template>

<script lang="ts" setup>
defineProps<{
  title: string;
}>()
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  // background: -webkit-linear-gradient(188deg, #003851 0%, #2B3044 100%);
  // background: -moz-linear-gradient(188deg, #003851 0%, #2B3044 100%);
  // background: -o-linear-gradient(188deg, #003851 0%, #2B3044 100%);
  // background: linear-gradient(188deg, #003851 0%, #2B3044 100%);
  // border: 1px solid #00BFE9;
  background: rgba(8, 36, 55, 0.7);
  height: 100%;
}
.title {
  line-height: 4.1rem;
  position: relative;
  font-size: 1.6rem;
  padding-left: 3.8rem;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0.3rem;
    bottom: 0;
    margin: auto;
    width: 2.4rem;
    height: 2.4rem;
    background: url(@imgs/circle@2x.png) 0 0 no-repeat;
    background-size: 100%;
  }
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: url(@imgs/Frame1280@2x.png) 0 no-repeat;
    background-size: 100%;
  }
}
</style>
